<template>
  <div class="app-container">
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="角色名字">
        <el-input v-model="listQuery.roleName" />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="getList()">搜索</el-button>
        <el-button type="primary" @click="getadd()">新增</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="list" border fit highlight-current-row style="width: 100%">
      <el-table-column align="center" prop="roleName" label="角色名字"></el-table-column>

      <el-table-column align="center" prop="createTime" label="记录时间"></el-table-column>

      <el-table-column align="center" label="操作" width="400">
        <template slot-scope="scope">
          <el-button type="text" @click="openSee(scope.row)">查看人员</el-button>
          <el-button type="text" @click="openDialogbindrolemenu(scope.row)">添加角色菜单</el-button>
          <el-button type="text" @click="openEdit(scope.row)">修改</el-button>
          <el-button type="text" @click.native="del(scope.row)" style="color:red">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="listQuery.pageNo"
      :limit.sync="listQuery.pageSize"
      @pagination="getList(null)"
    />

    <seePeople ref="seePeople" />
    <roleEdit ref="roleEdit" />
    <roleAdd ref="roleAdd" />
    <dialogbindrolemenu ref="dialogbindrolemenu" />
  </div>
</template>

<script>
import apiRole from "@/api/baseManager/role";
import Pagination from "@/components/Pagination";
import { confirm } from "@/utils/index";
import seePeople from "./dialogSeePeople";
import roleEdit from "./dialogRoleEdit";
import roleAdd from "./dialogRoleAdd";
import dialogbindrolemenu from './dialogBindRoleMenu'
export default {
  name: "userRole",
  components: { Pagination, seePeople, roleEdit, roleAdd ,dialogbindrolemenu},
  data() {
    return {
      list: [],
      total: 0,
      listQuery: {
        roleName: "", //角色名字
        pageNo: 1,
        pageSize: 10,
        roleId: ""
      },
    };
  },
  created() {
    this.getList(); // 初始化数据
  },
  methods: {
    // 表单数据
    getList(pageNo) {
      this.listQuery.pageNo = pageNo || this.listQuery.pageNo;
      apiRole.query(this.listQuery).then(res => {
        this.page = res.data.page;
        this.list = res.data.page.list;
        this.total = res.data.page.total;
      });
    },
    //删除
    del(row) {
      confirm("是否删除").then(() => {
        let data = {
          roleId: row.roleId
        };
        apiRole.delRoleById(data).then(res => {
          this.$message({ type: "success", message: "删除成功！" });
          this.getList();
        });
     });
    },
    //查看
    openSee(row) {
      this.$refs.seePeople.openSee(row);
    },
    //修改
    openEdit(row) {
      this.$refs.roleEdit.open(row);
    },
    //新增
    getadd() {
      this.$refs.roleAdd.getadd();
    },
    //添加角色权限
    openDialogbindrolemenu(row){
      this.$refs.dialogbindrolemenu.openDialogbindrolemenu(row.roleId)
    }
  }
};
</script>

<style scoped>
</style>
